import Head from 'next/head'
import { Row, Col, Breadcrumb,Affix } from "antd"
import dynamic from 'next/dynamic'
import { HomeOutlined, EyeOutlined, PlaySquareOutlined } from '@ant-design/icons';
import "../public/style/pages/detailed.css"
import ReactMarkdown from "react-markdown"
import MarkdownNavbar from 'markdown-navbar';
const Detailed = () => {
  const Header = dynamic(import('../components/Header'))
  const Footer = dynamic(import('../components/Footer'))
  const Avatar = dynamic(import('../components/Avatar'))
  const Adver = dynamic(import('../components/Adver'))
  let markdown = '# P01:课程介绍和环境搭建\n' +
    '[ **M** ] arkdown + E [ **ditor** ] = **Mditor**  \n' +
    '> Mditor 是一个简洁、易于集成、方便扩展、期望舒服的编写 markdown 的编辑器，仅此而已... \n\n' +
    '**这是加粗的文字**\n\n' +
    '*这是倾斜的文字*`\n\n' +
    '***这是斜体加粗的文字***\n\n' +
    '~~这是加删除线的文字~~ \n\n' +
    '\`console.log(111)\` \n\n' +
    '# p02:来个Hello World 初始Vue3.0\n' +
    '> aaaaaaaaa\n' +
    '>> bbbbbbbbb\n' +
    '>>> cccccccccc\n' +
    '***\n\n\n' +
    '# p03:Vue3.0基础知识讲解\n' +
    '> aaaaaaaaa\n' +
    '>> bbbbbbbbb\n' +
    '>>> cccccccccc\n\n' +
    '# p04:Vue3.0基础知识讲解\n' +
    '> aaaaaaaaa\n' +
    '>> bbbbbbbbb\n' +
    '>>> cccccccccc\n\n' +
    '#5 p05:Vue3.0基础知识讲解\n' +
    '> aaaaaaaaa\n' +
    '>> bbbbbbbbb\n' +
    '>>> cccccccccc\n\n' +
    '# p06:Vue3.0基础知识讲解\n' +
    '> aaaaaaaaa\n' +
    '>> bbbbbbbbb\n' +
    '>>> cccccccccc\n\n' +
    '# p07:Vue3.0基础知识讲解\n' +
    '> aaaaaaaaa\n' +
    '>> bbbbbbbbb\n' +
    '>>> cccccccccc\n\n' +
    '``` var a=11; ```'
  return (
    <div className="container">
      <Head>
        <title>文章内容</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Header />
      <Row className="comm-main" type="flex" justify="center">
        <Col className="comm-left" xs={24} sm={24} md={14}>
          <div>
            <div className='bread-div'>
              <Breadcrumb>
                <Breadcrumb.Item>列表页</Breadcrumb.Item>
                <Breadcrumb.Item>文章详情</Breadcrumb.Item>
              </Breadcrumb>
            </div>
            <div className="detailed-title">
              React开发
                </div>

            <div className="list-icon center">
              <span><HomeOutlined />2019-06-28</span>
              <span><EyeOutlined />视频教程</span>
              <span><PlaySquareOutlined />5498人</span>
            </div>

            <div className="detailed-content" >
              <ReactMarkdown source={markdown} escapeHtml={false} />
            </div>
          </div>
        </Col>
        <Col className="comm-right" xs={0} sm={0} md={4}>
          <Avatar />
          <Adver />

          <Affix>
            <div className="detailed-nav comm-box">
              <div className="nav-title">文章目录</div>
              <MarkdownNavbar
                className="article-menu"
                ordered={false}
                source={markdown} />
            </div>
          </Affix>
        </Col>
      </Row>

      <Footer />
    </div>
  )
}
export default Detailed;
